<template>
  <el-dialog
    :model-value="visible"
    :title="title"
    :width="width"
    :before-close="handleClose"
    :close-on-click-modal="!disableCloseOnOverlay"
    class="common-modal"
  >
    <slot></slot>
    <template #footer v-if="!hideFooter">
      <span class="dialog-footer">
        <el-button @click="handleCancel">{{ cancelText }}</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="confirmLoading">
          {{ confirmText }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    default: '提示',
  },
  width: {
    type: String,
    default: '50%',
  },
  confirmText: {
    type: String,
    default: '确定',
  },
  cancelText: {
    type: String,
    default: '取消',
  },
  hideFooter: {
    type: Boolean,
    default: false,
  },
  confirmLoading: {
    type: Boolean,
    default: false,
  },
  disableCloseOnOverlay: {
      type: Boolean,
      default: false
  }
});

const emit = defineEmits(['close', 'confirm', 'cancel']);

const handleClose = () => {
  emit('close');
};

const handleConfirm = () => {
  emit('confirm');
};

const handleCancel = () => {
  emit('cancel');
  handleClose();
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
